<link rel="stylesheet" href="/training/css/training.css">
<script src="/training/js/training.js"></script>
<script src="/training/js/alpine.min.js"></script>
<script src="/training/js/confetti.browser.min.js"></script>

<div id="training" class="section-profile">
    <div class="plugin-container" x-data="trainingData()"
         x-init="$watch('selectedCert', value => getTraining(value)), $watch('selectedBadge', value => updateVisibleFlags(value))">
        <template x-if="completedCertificate">
            <div id="canvas" x-init="confetti()"></div>
        </template>
        <div class="flex flex-col w-100">
            <div class="flex flex-col text-left">
                <div class="flex flex-row justify-between">
                    <h1 class="plugin-header">Training</h1>
                    <span role="button" class="plugin-x-button hover:bg-caldera-primary rounded pl-1"
                          onclick="removeSection('training')">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </span>
                </div>
                <div class="flex flex-row flex-wrap items-center">
                    <div class="certificate-select">
                        <label for="training-cert-select">Choose a certificate:</label>
                        <span class="flex items-center">
                            <select x-model="selectedCert" id="training-cert-select"
                                    class="rounded cursor-pointer certificate-select">
                                <option selected>Choose a certificate</option>
                                {% for cert in certificates %}
                                    <option value="{{ cert.name }}"
                                            x-on:select="selectedCert=cert">{{ cert.name }}</option>
                                {% endfor %}}
                            </select>
                        </span>
                    </div>
                    <template x-if="completedCertificate">
                        <div>
                            <label for="certificate-code">Certificate code:</label>
                            <span class="flex items-center flex-row">
                                <input id="certificate-code" type="text" readonly
                                       class="rounded cursor-pointer certificate-code-input"
                                       x-bind:value="certificateCode"
                                       aria-label="Certificate code"/>
                                <button class="copy-button rounded"
                                        x-on:click="copyCode()">
                                    <span id="copy-text">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
                                             viewBox="0 0 24 24" stroke="currentColor">
                                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
                                        </svg>
                                    </span>
                                </button>
                            </span>
                        </div>
                    </template>
                </div>
            </div>
            <div class="flex flex-col text-left">
                <template x-if="badgeList">
                    <div class="badge-container justify-evenly flex flex-row flex-wrap w-full justify-evenly">
                        <template x-for="badge in badgeList" :key="badge">
                            <button class="badge-container-button"
                                    x-on:click="(selectedBadge == badge) ? selectedBadge = '' : selectedBadge = badge"
                                    x-bind:class="(selectedBadge.name == badge.name) ? 'selected-badge' : ''"
                                    x-bind:value="badge">
                                        <span class="flex flex-col justify-center items-center">
                                              <span class="badge-icon-container"
                                                    x-bind:class="badge.completed ? 'badge-completed' : ''">
                                                   <svg xmlns="http://www.w3.org/2000/svg"
                                                        fill="current"
                                                        viewBox="0 0 24 24"
                                                        stroke="currentColor"><path
                                                           stroke-linecap="round"
                                                           stroke-linejoin="round"
                                                           stroke-width="2"
                                                           d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                                              </span>
                                                  <img x-bind:alt="badge.name"
                                                       class="badge-icon-img"
                                                       onerror="this.src='/training/img/badges/defaultlock.png'"
                                                       x-bind:src="badge.icon_src"/>
                                        </span>
                                <span class="badge-text hover:bg-caldera-primary rounded"
                                      x-bind:class="badge.completed ? 'badge-completed-text' : ''"
                                      x-text="badge.name"></span>
                            </button>
                        </template>
                    </div>
                </template>
                <template x-if="visibleFlagList">
                    <div>
                        <div class="flag-status-container flex flex-row flex-wrap w-full justify-center">
                            <template x-for="flag in visibleFlagList" :key="flag">
                                <span class="status-flag" x-bind:class="flag.completed ? 'status-flag-completed' : ''">
                                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                       fill="currentColor">
                                    <path fill-rule="evenodd"
                                          d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4A1 1 0 0116 13H6a1 1 0 00-1 1v3a1 1 0 11-2 0V6z"
                                          clip-rule="evenodd"/>
                                  </svg>
                                </span>
                            </template>
                        </div>
                        <div class="flex flex-row flex-wrap justify-center w-full justify-evenly">
                            <div class="flag-card-container">
                                <template x-for="flag in visibleFlagList" :key="flag">
                                    <div class="flag-card flex flex-col rounded justify-between"
                                         x-bind:class="flag.completed ? 'flag-card-completed' : ''">
                                        <div class="flag-card-wrapper">
                                            <div class="flag-card-content flex flex-col justify-start overflow-hidden"
                                                 x-bind:class="flag.showMore ? 'flag-show-more' : ''">
                                                <div class="flag-card-title flex justify-evenly align-center">
                                                    <div class="flex justify-start items-center flag-card-title-name">
                                          <span class="flag-card-wrapper">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                                 fill="currentColor">
                                              <path fill-rule="evenodd"
                                                    d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4A1 1 0 0116 13H6a1 1 0 00-1 1v3a1 1 0 11-2 0V6z"
                                                    clip-rule="evenodd"/>
                                            </svg>
                                          </span>
                                                        <p x-text="flag.name"></p>
                                                    </div>
                                                    <div class="flex justify-end items-center flag-card-title-badge">
                                            <span class="flex flex-col justify-center items-center">
                                                  <span class="flag-badge-icon-container">
                                                       <svg xmlns="http://www.w3.org/2000/svg"
                                                            fill="current"
                                                            viewBox="0 0 24 24"
                                                            stroke="currentColor"><path
                                                               stroke-linecap="round"
                                                               stroke-linejoin="round"
                                                               stroke-width="2"
                                                               d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                                                  </span>
                                                      <img x-bind:alt="flag.badge_name"
                                                           class="badge-icon-img"
                                                           onerror="this.src='/training/img/badges/defaultlock.png'"
                                                           x-bind:src="flag.badge_icon"/>
                                            </span>
                                                    </div>
                                                </div>
                                                <!--                                        FLAG CHALLENGE TEXT-->
                                                <div class="flag-card-text flex flex-col justify-center">
                                                    <div>
                                                        <div class="flex flex-col justify-center text-left">
                                                            <p x-text="flag.challenge"></p>
                                                            <p x-text="flag.extra_info"></p>
                                                            <template x-if="flag.code.includes('text-entry')">
                                                                <span>
                                                                    <label x-bind:for="flag.code">Write text here:</label>
                                                                    <input x-bind:disabled="flag.completed"
                                                                           class="text-colors-black pl-1 pr-2"
                                                                           x-bind:id="flag.code"
                                                                           placeholder="type here"
                                                                           x-on:input="onTextInput"/>
                                                                </span>
                                                            </template>
                                                            <div class="flex flex-col items-center p-2">
                                                                <a class="underline hover:text-colors-gray-500"
                                                                   target="_blank"
                                                                   x-bind:href="`/plugin/training/solution-guides/certificates/${flag.cert_name}/badges/${flag.badge_name}/flags/${flag.name}`">View
                                                                    Solution Guide</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--             SHOW MORE BUTTON-->
                                        <div x-on:click="flag.showMore = !flag.showMore"
                                             class="flag-show-more-button flex justify-center bg-gradient-to-b via-caldera-grayish to-colors-black hover:bg-caldera-primary w-full">
                                            <template x-if="!flag.showMore">
                                                <span>
                                                  <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                       viewBox="0 0 24 24"
                                                       stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                          stroke-width="2"
                                                          d="M19 9l-7 7-7-7"/>
                                                  </svg>
                                                </span>
                                            </template>
                                            <!--          SHOW LESS BUTTON-->
                                            <template x-if="flag.showMore">
                                                <span>
                                                  <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                       viewBox="0 0 24 24"
                                                       stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                          stroke-width="2"
                                                          d="M5 15l7-7 7 7"/>
                                                  </svg>
                                                </span>
                                            </template>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>

